---
import Icon from "../lib/Icon.astro"
import Layout from "../layouts/Layout.astro"
import { ICONS } from "../utils"

const names_ = ICONS.matchAll(/id="\S+"/g)
let names = Array.from(names_).map((name) => name[0].slice(4, -1))
---

<Layout title="Иконки">
    <Fragment slot="seo">
        <meta
            name="description"
            content="Список иконок, используемых на сайте"
        />
    </Fragment>
    <div class="icons">
        {
            names.map((name) => (
                <div class={`icons__item--${name}`}>
                    <Icon name={name} />
                    {name}
                </div>
            ))
        }
    </div>
</Layout>

<style>
    .icons {
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(auto-fit, minmax(var(--icon-size), 1fr));
        --icon-size: 5em;
        width: 90%;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        color: var(--text-color);
    }
    .icons__item--pwa {
        grid-column: span 2;
    }
</style>
